<template>
  <div class="topnavsstyle">
    <div class="topnavsstyle-header">
      <div class="title">{{ datas.title }}</div>
      <div class="desc">{{ datas.desc }}</div>
    </div>
    <div class="topnavsstyle-body">
      <el-form :model="datas" size="small">
        <!-- 数据来源选择 -->
        <el-form-item label="数据来源">
          <el-radio-group v-model="datas.form.source" @change="handlerChangeSource">
            <el-radio
              v-for="item in list"
              :key="item.label"
              :label="item.label"
            >
              {{ item.title }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 自定义分类 -->
        <el-form-item v-if="datas.form.source === 0" label="选择分类">
          <el-cascader
            ref="category"
            v-model="category"
            :options="options"
            :props="{ multiple: true, checkStrictly: true }"
            @change="handlerChangeCategory"
          ></el-cascader>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopNavsStyle',
  props: {
    datas: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      list: [
        {
          label: 1,
          title: '全部分类'
        },
        {
          label: 0,
          title: '自定义'
        }
      ],
      options: [],
      category: this.datas.form.category ? this.datas.form.category : [].concat(this.datas.form.source_list.map(item => item.value))
    }
  },
  created() {
    this.getCategoryCascader()
  },
  methods: {
    // 获取分类树形结构
    getCategoryCascader() {
      this.$http.get(
          '/course/admin/category/cascader',
          {},
          ({ data }) => {
            this.options = data
            if (this.datas.form.source === 1) {
              this.setAll()
            }
          },
          _ => {
          },
          false
      );
    },
    setAll() {
      const navList = []
      this.options.forEach(item => {
        navList.push({
          label: item.label,
          value: item.value
        })
      })
      this.datas.form.source_list = navList
    },
    handlerChangeCategory() {
      this.$set(this.datas.form, 'category', this.category)
      this.$nextTick(_ => {
        const nodes = this.$refs.category.getCheckedNodes()
        const navList = []
        nodes.forEach(item => {
          if (item.checked) {
            navList.push(item.data)
          }
        })
        this.datas.form.source_list = navList
      })
    },
    // 数据来源改变
    handlerChangeSource(val) {
      if (val === 1) {
        this.setAll()
      } else {
        this.datas.form.source_list = []
        this.category = []
      }
    }
  }
}
</script>

<style scoped lang="scss">
.topnavsstyle {
  padding-top: 20px;
  padding-left: 24px;
  padding-right: 34px;

  &-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      line-height: 24px;
    }

    .desc {
      margin-top: 10px;
      font-size: 12px;
      font-weight: 400;
      color: #909399;
      line-height: 16px;
    }
  }

  &-body {
    margin-top: 20px;
  }
}
</style>
